<template>
  <div class="formBox">
    <!-- 卡片视图区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item>医废明细追踪</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="22">
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <!-- 收集时间状态 -->
          <div>
            <!-- <div class="demonstration">收集状态</div> -->
            <el-cascader
              v-model="timeData"
              :options="options"
              @change="handleChange"
              placeholder="请选择时间"
            ></el-cascader>
          </div>
          <!-- /收集时间状态 -->
        </el-col>
        <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
          <!-- 日期 -->
          <div>
            <!-- <div class="demonstration">收集日期</div> -->
            <el-date-picker
              ref="myDay"
              v-model="timeAndEnd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
          <!-- /日期 -->
        </el-col>
        <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
          <div>
            <!-- <span class="demonstration">废物状态</span> -->
            <el-select
              @change="modifFormData"
              v-model="choiceSearchData"
              multiple
              placeholder="请选择医疗废物类别"
              clearable
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <div>
            <!-- <span class="demonstration">废物状态</span> -->
            <el-select
              @change="modifFormDataDepartment"
              v-model="choiceSearchDataDepartment"
              multiple
              placeholder="请选择科室"
              clearable
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <!-- <el-input v-model="department" placeholder="请输入科室" :disabled="true"></el-input> -->
        </el-col>
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <el-input v-model="submitter" placeholder="请输入收集人"></el-input>
        </el-col>
        <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="3">
          <el-input v-model="collector" placeholder="请输入交接人"></el-input>
        </el-col>
        <!-- 重置 -->
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" style="padding-left: 0">
          <el-button @click="deleteData" type="danger">重置</el-button>
        </el-col>
        <!-- /重置 -->
        <!-- 重置 -->
        <el-col :xs="1" :sm="1" :md="1" :lg="1" :xl="1" style="padding-left: 0">
          <el-button @click="goExport" type="primary">导出</el-button>
        </el-col>
        <!-- /重置 -->
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="getFormData()"
            class="searchBtn"
            >搜索</el-button
          >
          <!-- <el-button slot="append" icon="el-icon-search" @click="getSearchFormData">搜索</el-button> -->
        </el-col>
      </el-row>
      <div></div>

      <!-- table表格区域 -->
      <el-table :data="tableData" label-width="auto" fit size="medium">
        <el-table-column type="index"></el-table-column>
        <el-table-column
          prop="packageCode"
          label="标签条码"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="boxID"
          label="厢号"
          width="200px"
        ></el-table-column>

        <el-table-column
          prop="medicalLittleClass"
          label="医废类别"
          width="200px"
        ></el-table-column>
        <el-table-column label="重量" width="200px">
          <template slot-scope="scope">{{ scope.row.weight_Kg }}KG</template>
        </el-table-column>
        <!-- <el-table-column label="出库重量">
          <template slot-scope="scope">{{scope.row.OutWeight_kg}}KG</template>
        </el-table-column>-->
        <el-table-column
          prop="dept_Name"
          label="科室"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="collector"
          label="收集人"
          width="200px"
        ></el-table-column>
        <el-table-column
          prop="doctorId"
          label="科室交接人"
          width="200px"
        ></el-table-column>
        <el-table-column label="交接时间" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.creationTime | relativeTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入库时间" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.inWarehouseTime | relativeTime }}</span>
            <!-- | relativeTime -->
          </template>
        </el-table-column>
        <el-table-column label="出库时间" width="200px">
          <template slot-scope="scope">
            <span>{{ scope.row.outTime | relativeTime }}</span>

            <!-- | relativeTime -->
          </template>
        </el-table-column>
        <el-table-column
          prop="houseName"
          label="操作"
          fixed="right"
          width="200px"
        >
          <template slot-scope="scope">
            <el-button type="primary" @click="getFormDataId(scope.row.id)"
              >查看</el-button
            >
            <el-button type="warning" @click="goModify(scope.row.id)"
              >编辑</el-button
            >
            <el-button type="danger" @click="goDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>

    <!-- 查看弹出框 -->
    <el-dialog title="提示" :visible.sync="modifyCateDialogVisible" width="30%">
      <el-form
        label-width="100px"
        class="demo-ruleForm"
        :model="detailedFormData"
        disabled
      >
        <el-form-item label="标签条码">
          <el-input v-model="detailedFormData.packageCode"></el-input>
        </el-form-item>
        <el-form-item label="厢号">
          <el-input v-model="detailedFormData.boxID"></el-input>
        </el-form-item>
        <el-form-item label="暂存库地点">
          <el-input v-model="detailedFormData.warehouseId"></el-input>
        </el-form-item>
        <el-form-item label="医废类别">
          <el-input v-model="detailedFormData.medicalLittleClass"></el-input>
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="detailedFormData.weight_Kg"></el-input>
        </el-form-item>
        <el-form-item label="科室">
          <el-input v-model="detailedFormData.dept_Name"></el-input>
        </el-form-item>
        <el-form-item label="收集人">
          <el-input v-model="detailedFormData.collector"></el-input>
        </el-form-item>
        <el-form-item label="科室交接人">
          <el-input v-model="detailedFormData.doctorId"></el-input>
        </el-form-item>
        <el-form-item label="收集时间">
          <el-input v-model="detailedFormData.creationTime"></el-input>
        </el-form-item>
        <el-form-item label="入库时间">
          <el-input v-model="detailedFormData.inWarehouseTime"></el-input>
        </el-form-item>
        <el-form-item label="出库时间">
          <el-input v-model="detailedFormData.outTime"></el-input>
        </el-form-item>

        <el-form-item label="处置公司">
          <el-input v-model="detailedFormData.transferCompanyName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyCateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyCateDialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 查看弹出框 -->

    <!-- 编辑弹窗 -->
    <el-dialog
      title="提示"
      :visible.sync="modifyCateDialogVisibleData"
      width="30%"
    >
      <el-form label-width="100px" class="demo-ruleForm" :model="addForm">
        <el-form-item label="标签条码">
          <el-input v-model="addForm.packageCode"></el-input>
        </el-form-item>
        <el-form-item label="厢号">
          <el-input v-model="addForm.boxID"></el-input>
        </el-form-item>
        <el-form-item label="暂存库地点">
          <el-input v-model="addForm.warehouseId"></el-input>
        </el-form-item>
        <el-form-item label="医废类别">
          <el-input v-model="addForm.medicalLittleClass"></el-input>
        </el-form-item>
        <el-form-item label="重量">
          <el-input v-model="addForm.weight_Kg"></el-input>
        </el-form-item>
        <el-form-item label="科室">
          <el-input v-model="addForm.departmentId"></el-input>
        </el-form-item>
        <el-form-item label="收集人">
          <el-input v-model="addForm.collector"></el-input>
        </el-form-item>
        <el-form-item label="科室交接人">
          <el-input v-model="addForm.doctorId"></el-input>
        </el-form-item>
        <el-form-item label="收集时间">
          <el-input v-model="addForm.creationTime"></el-input>
        </el-form-item>
        <el-form-item label="入库时间">
          <el-input v-model="addForm.inWarehouseTime"></el-input>
        </el-form-item>
        <el-form-item label="出库时间">
          <el-input v-model="addForm.outTime"></el-input>
        </el-form-item>

        <el-form-item label="处置公司">
          <el-input v-model="addForm.transferCompanyName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyCateDialogVisibleData = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="modifyFormData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- /编辑弹窗 -->
  </div>
</template>

<script>
import axios from "axios";
import {
  detailed,
  detailedForm,
  getSearchData,
  modifyDocData,
  exportTableOne,
} from "../network/api.js";
import dayjs from "../utils/dayjs";
export default {
  name: "sss",
  components: {},
  props: {},
  data() {
    //这里存数据
    return {
      addForm: {},
      // 编辑弹框阀
      modifyCateDialogVisibleData: false,

      // 交接时间类型
      timeType: 0,
      // 科室数据
      // department: '',
      // 收集人
      submitter: "",
      // 交接人
      collector: "",
      // 搜索框数据
      searchData: "",
      // 多选搜索科室功能
      choiceSearchData: [],

      choiceSearchDataDepartment: [],
      // 科室数据
      options2: [],
      // 废物状态
      options1: [
        {
          value: "感染性废物",
          label: "感染性废物",
        },
        {
          value: "药物性废物",
          label: "药物性废物",
        },
        {
          value: "化学性废物",
          label: "化学性废物",
        },
        {
          value: "损失性废物",
          label: "损失性废物",
        },
        {
          value: "病理性废物",
          label: "病理性废物",
        },
      ],
      timeAndEnd: "",
      // 入库时间
      timeData: [],
      // 收集状态
      options: [
        {
          value: "交接时间",
          label: "交接时间",
        },
        {
          value: "入库时间",
          label: "入库时间",
        },

        {
          value: "出库时间",
          label: "出库时间",
        },
      ],
      detailedFormData: {},
      // 添加表单的验证规则对象

      // 查看弹框阀
      modifyCateDialogVisible: false,
      // diolog框开启关闭阀
      addCateDialogVisible: false,
      // 查询参数对象
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10,
        keywords: "",
      },
      // 数据列表
      tableData: [],
      // 总数据条数
      total: 0,

      starTime: "",
      endTime: "",
      // 编辑的id
      userId: "",
    };
  },
  //计算属性
  computed: {},
  //监控data中数据变化
  watch: {},
  //方法
  methods: {
    async goDelete(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete(
              "http://39.104.74.183:21028/api/services/app/Med_LittleInfo/Delete?id=" +
                id +
                ""
            )
            .then((res) => {
              console.log(res);
              this.getFormData();
            })
            .catch((err) => {
              console.log(err);
            });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      // console.log(id)
    },

    // 导出
    goExport() {
      console.log(1);
      if (this.timeAndEnd != "") {
        // console.log(this.$refs.myDay.displayValue[0])
        this.starTime = this.$refs.myDay.displayValue[0];
        this.endTime = this.$refs.myDay.displayValue[1];
      }
      exportTableOne({
        type: this.timeType,
        starTime: this.starTime,
        endTime: this.endTime,
        deptName: this.choiceSearchDataDepartment.toString(),
        category: this.choiceSearchData.toString(),
        name: this.collector,
        collector: this.submitter,
      })
        .then((res) => {
          console.log(res);
          // window.open(`${"www.baidu.com"}`);
          window.open(
            `${
              "http://39.104.74.183:21028/Home/ExportDetailsExcel?type=" +
              this.timeType +
              `&starTime=` +
              this.starTime +
              `&endTime=` +
              this.endTime +
              `&deptName=` +
              this.choiceSearchDataDepartment.toString() +
              `&category=` +
              this.choiceSearchData.toString() +
              `&name=` +
              this.collector +
              `&collector=` +
              this.submitter
            }`
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑确定按钮
    async modifyFormData() {
      this.modifyCateDialogVisibleData = false;
      let data = {
        id: this.userId,
        packageCode: this.addForm.packageCode,
        boxID: this.addForm.boxID,
        warehouseId: this.addForm.warehouseId,
        medicalLittleClass: this.addForm.medicalLittleClass,
        weight_Kg: this.addForm.weight_Kg,
        departmentId: this.addForm.departmentId,
        collector: this.addForm.collector,
        doctorId: this.addForm.doctorId,
        creationTime: this.addForm.creationTime,
        inWarehouseTime: this.addForm.inWarehouseTime,
        outTime: this.addForm.outTime,
        transferCompanyName: this.addForm.transferCompanyName,
      };
      axios
        .put(
          "http://39.104.74.183:21028/api/services/app/Med_LittleInfo/Update",
          data
        )
        .then((res) => {
          console.log(res);
          this.getFormData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑按钮
    async goModify(id) {
      // console.log(this.choiceSearchDataDepartment)
      // console.log(id)
      this.userId = id;
      this.modifyCateDialogVisibleData = true;
      await detailedForm({
        id: id,
      })
        .then((res) => {
          // console.log(res.result)

          this.addForm = res.result;
          if (
            this.addForm.inWarehouseTime.toString() == "0001-01-01T00:00:00"
          ) {
            this.addForm.inWarehouseTime = " ";
          } else {
            this.addForm.inWarehouseTime = this.addForm.inWarehouseTime
              .toString()
              .slice(0, 10);
          }
          if (this.addForm.outTime.toString() == "0001-01-01T00:00:00") {
            this.addForm.outTime = " ";
          } else {
            this.addForm.outTime = this.addForm.outTime.toString().slice(0, 10);
          }
          this.addForm.creationTime = this.addForm.creationTime.slice(0, 10);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 重置按钮
    deleteData() {
      (this.timeType = 0),
        (this.starTime = ""),
        (this.endTime = ""),
        // (this.$refs.myDay.displayValue[0] = ""),
        //   (this.$refs.myDay.displayValue[1] = "");
        (this.choiceSearchDataDepartment = []);
      this.choiceSearchData = [];
      this.timeData = [];
      this.timeAndEnd = "";
      this.submitter = "";
      this.collector = "";

      this.getFormData();
    },
    // 获取数据
    async getFormData() {
      // if (this.choiceSearchData.length == 0) {
      //   this.choiceSearchData = "";
      // } else {
      //   // this.choiceSearchData = JSON.stringify(this.choiceSearchData);
      //   this.choiceSearchData = this.choiceSearchData.toString();
      // }

      if (
        (this.timeAndEnd == "" && this.timeData.length !== 0) ||
        (this.timeAndEnd != "" && this.timeData.length === 0)
      ) {
        return this.$message("时间或日期没有输入");
      }
      if (this.timeAndEnd != "") {
        // console.log(this.$refs.myDay.displayValue[0])
        this.starTime = this.$refs.myDay.displayValue[0];
        this.endTime = this.$refs.myDay.displayValue[1];
      }
      await detailed({
        MaxResultCount: this.queryInfo.pagesize,
        SkipCount: (this.queryInfo.pagenum - 1) * this.queryInfo.pagesize,
        type: this.timeType,
        starTime: this.starTime,
        endTime: this.endTime,
        deptName: this.choiceSearchDataDepartment.toString(),
        category: this.choiceSearchData.toString(),
        name: this.collector,
        collector: this.submitter,
      })
        .then((res) => {
          console.log(res.result);
          // this.choiceSearchData = JSON.parse(this.choiceSearchData);
          console.log(res);
          console.log(res.result);
          console.log(res.result.items);

          this.total = res.result.totalCount;
          this.tableData = res.result.items;
          // console.log(this.choiceSearchData)
          if (res.result.items.length == 0) {
            console.log(
              res.result.totalCount - this.queryInfo.pagesize,
              res.result.items.length
            );
            detailed({
              MaxResultCount: this.queryInfo.pagesize,
              // SkipCount: res.result.totalCount - this.queryInfo.pagesize,
              SkipCount:
                res.result.totalCount -
                parseInt(res.result.totalCount / this.queryInfo.pagesize) *
                  this.queryInfo.pagesize,
              type: this.timeType,
              starTime: this.starTime,
              endTime: this.endTime,
              // deptName: JSON.stringify(this.department),
              deptName: this.choiceSearchDataDepartment.toString(),
              category: this.choiceSearchData,
              name: this.collector,
              collector: this.submitter,
            })
              .then((res) => {
                console.log(res.result.items);
                this.tableData = res.result.items;
              })
              .catch((err) => {
                console.log(err);
              });
          }

          this.tableData.forEach((item) => {});
          // this.tableData = res.result.items

          for (let i = 0; i <= res.result.items; i++) {
            console.log(res.result.items[i]);
          }

          this.tableData = res.result.items;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取查看数据
    async getFormDataId(id) {
      // console.log(this.timeAndEnd)
      // console.log(typeof this.timeAndEnd)
      this.modifyCateDialogVisible = true;
      await detailedForm({
        id: id,
      })
        .then((res) => {
          // console.log(res.result)

          this.detailedFormData = res.result;
          if (
            this.detailedFormData.inWarehouseTime.toString() ==
            "0001-01-01T00:00:00"
          ) {
            this.detailedFormData.inWarehouseTime = " ";
          } else {
            this.detailedFormData.inWarehouseTime = this.detailedFormData.inWarehouseTime
              .toString()
              .slice(0, 10);
          }
          if (
            this.detailedFormData.outTime.toString() == "0001-01-01T00:00:00"
          ) {
            this.detailedFormData.outTime = " ";
          } else {
            this.detailedFormData.outTime = this.detailedFormData.outTime
              .toString()
              .slice(0, 10);
          }
          this.detailedFormData.creationTime = this.detailedFormData.creationTime.slice(
            0,
            10
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 监听对话框的关闭事件，重置表单数据
    // 监听 pagesize 改变的事件

    handleSizeChange(newSize) {
      // console.log(newSize, 123)
      this.queryInfo.pagesize = newSize;
      this.getFormData();
    },

    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      // console.log(newPage, 321)
      this.queryInfo.pagenum = newPage;
      this.getFormData();
    },

    handleChange(value) {
      // console.log(value)
      if (value[0] == "交接时间") {
        this.timeType = 1;
      } else if (value[0] == "入库时间") {
        this.timeType = 2;
      } else if (value[0] == "出库时间") {
        this.timeType = 3;
      }
    },
    modifFormData(val) {
      console.log(val);
      this.$forceUpdate();
    },
    modifFormDataDepartment(val) {
      this.$forceUpdate();
    },
  },
  //声明周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log(this.$store.state.MyUserName, 22);
    console.log(window.sessionStorage.getItem("userName"));
    this.getFormData();
    this.options2 = JSON.parse(window.sessionStorage.getItem("departmentIds"));

    console.log(parseInt(82 / 10));
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>

<style lang="less" scoped>
.iptwidth {
  width: 31.25rem;
  // margin-left: 34rem;
}
// .movuLeft {
//   margin-left: 10px;
// }
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.el-row[data-v-585d5fac] {
  margin-bottom: 0;
}
.searchBtn {
  margin-left: 1.125rem;
}
.el-button {
  padding: 12px 10px;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 100%;
}
.el-select {
  display: inline-block;
  position: relative;
  width: 100%;
}
</style>


